<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" :finished-text="list.length > 0 ? '没有更多了' : ''" @load="onLoad">
      <div v-for="item in list" :key="item.strId">
        <slot :data="item"></slot>
      </div>
      <template v-slot:finished>
        <van-empty v-if="list.length === 0" class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" :description="params.keywords ? '暂无搜索内容' : '暂无内容'" />
      </template>
    </van-list>
  </van-pull-refresh>
</template>
<script>
export default {
  name: 'list',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      params$: {
        intCurPage: 1,
        intPageSize: 10
      },
      fn: null,
      params: {}
    }
  },
  created () {
    // this.onRefresh()
  },
  activated () {
    // this.onRefresh()
  },
  methods: {
    onLoad () {
      if (this.fn) {
        this.$getList()
      }
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      this.params$.intCurPage = 1

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    $getList (fn = this.fn, params = null) {
      this.loading = true

      if (params) {
        this.params = params
        Object.assign(this.params$, {
          ...this.params
        })
      }
      if (this.params$.intCurPage === 1) {
        this.list = []
      }
      fn(this.params$).then((res) => {
      
        setTimeout(() => {
          // 加载状态结束
          this.loading = false
          this.refreshing = false
        }, 800)
        // 更新数据
        this.list.push(...res.objList)
        // 数据全部加载完成
        if (this.list.length >= res.intAllCount) {
          this.finished = true
        }
        if (this.list.length === 0) {
          this.finished = true
          return
        }
        if (fn) {
          this.fn = fn
        }
        this.params$.intCurPage++
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>